﻿<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>请假申请</title>
    <!-- Fav  Icon Link -->
    <!-- Bootstrap core CSS -->
    <link rel="stylesheet" th:href="@{/css/bootstrap.min.css}">
    <!-- themify icons CSS -->
    <link rel="stylesheet" th:href="@{/css/themify-icons.css}">
    <!-- Animations CSS -->
    <link rel="stylesheet" th:href="@{/css/animate.css}">
    <!-- Main CSS -->
    <link rel="stylesheet" th:href="@{/css/styles.css}">
    <link rel="stylesheet" th:href="@{/css/green.css}" id="style_theme">
    <link rel="stylesheet" th:href="@{/css/responsive.css}">
    <!-- morris charts -->
    <link rel="stylesheet" th:href="@{/charts/css/morris.css}">
    <!-- jvectormap -->
    <link rel="stylesheet" th:href="@{/css/jquery-jvectormap.css}">
    <link rel="stylesheet" th:href="@{/datatable/dataTables.bootstrap4.min.css}">
    <link rel="stylesheet" th:href="@{/css/layui.css}" media="all">
    <script th:src="@{/js/modernizr.min.js}"></script>
</head>
<body>
<br>
<br>
<br>
<form   class="layui-form" action="/leave/addLeave" >

    <div class="layui-form-item">
        <label class="layui-form-label"><font color="red">*</font>姓名</label>
        <div class="layui-input-inline">
            <input type="text" name="stu_name" lay-verify="required|username" placeholder="请输入姓名" autocomplete="off" class="layui-input">
            <input type="text" style="display: none" id="result" class="layui-input" lay-verify="result" name="result">
        </div>
        <label class="layui-form-label"><font color="red">*</font>学号</label>
        <div class="layui-input-inline">
            <input type="text" name="stu_id" lay-verify="pass" placeholder="请输入学号" autocomplete="off" class="layui-input">
        </div>
        <div class="layui-inline">
            <label class="layui-form-label" style="width: 100px"><font color="red">*</font>联系方式</label>
            <div class="layui-input-inline">
                <input type="tel" name="stu_tel" lay-verify="required|phone"  placeholder="请输入手机号" autocomplete="off" class="layui-input">
            </div>
        </div>
    </div>
    <br>
 <!--   <div class="layui-form-item">

    </div>
-->
    <!--<div class="layui-form-item">
        <label class="layui-form-label">学号</label>
        <div class="layui-input-inline">
            <input type="password" name="password" lay-verify="pass" placeholder="请输入密码" autocomplete="off" class="layui-input">
        </div>
        <div class="layui-form-mid layui-word-aux">请输入学号</div>
    </div>-->


    <div class="layui-inline">
        <label class="layui-form-label"><font color="red">*</font>楼房号</label>
        <div class="layui-input-inline">
            <select lay-filter="house" name="hou_id" lay-verify="required" lay-search="" style="width: 100px">
                <option value="">请选择</option>
                <option  th:each="hou:${hous}" th:text="${hou.hou_id}" th:value="${hou.hou_id}"></option>
            </select>
        </div>
    </div>
    <br>
    <br>
    <br>
    <div class="layui-inline">
        <label class="layui-form-label"><font color="red">*</font>寝室号</label>
        <div class="layui-input-inline">
            <select name="dor_id" lay-verify="required" lay-search="" id="dor" style="width: 100px">
                <option value="">请选择</option>
            </select>
        </div>
    </div>

    <br>
    <br>
    <br>
    <div class="layui-inline">
        <label class="layui-form-label" style="width: 80px;"><font color="red">*</font>时间</label>
        <div class="layui-input-inline">
            <input lay-verify = "date" name="leavetime" type="text" class="layui-input" style="width: 280px" id="test16" autocomplete="off" placeholder="开始 到 结束">
        </div>
    </div>
    <br>
    <br>
    <br>
    <div class="layui-form-item layui-form-text">
        <label class="layui-form-label" style="width: 100px"><font color="red">*</font>请假原因</label>
        <div class="layui-input-block">
            <textarea lay-verify = "text" name="cause" style="width: 42%" placeholder="请输入请假原因" class="layui-textarea"></textarea>
        </div>
    </div>
    <div class="modal fade" id="addModal" data-th-background="static" data-th-keytype="false">
        <div class="modal-dialog">
            <div class="modal-content">
                <!--顶部标题-->
                <div class="modal-header">
                    <!--标题-->
                    <h5>人脸认证</h5>
                    <button type="button" class="close" data-dismiss="modal">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <!--内容-->
                <div class="modal-body">
                    <!--人脸识别-->
                    <div align="center"  id="renlian">
                        <canvas id="myCanvas" width="475" height="315" style="border:solid black;z-index: 1;position: absolute" >
                            <!--<video id="video" width="480" height="320" controls></video>-->
                        </canvas>
                        <video id="video" width="480" height="320" controls>
                        </video>
                        <!--<form method="post" action="/attendance/addAttendance">-->
                            <div>
                                <!--<button id="capture" >考勤</button>-->
                                <div class="layui-form-item">
                                    <div class="layui-input-block">
                                        <button type="button" class="layui-btn"   style="margin-right: 100px" onclick="auth()" ><a>认证</a></button>
                                    </div>
                                </div>
                                <img id="photo" alt="photo"  style="width: 480px;height: 320px;display: none">
                                <input type="text" id="base64" style="display: none" name="base64Data" >

                            </div>
                            <canvas id="canvas" width="480" height="320" style="display: none"></canvas>
                        <!--</form>-->

                    </div>
                </div>
            </div>
        </div>
    </div>
    <button style="margin-left: 110px" type="button" class="btn btn-info mt-3 mb-0" onclick="openAddModal()"><span
            class="ti-pencil-alt"></span> 人脸信息认证
    </button>
    <div class="layui-form-item" style="margin-top: 20px">
        <div class="layui-input-block">
            <button type="submit" class="layui-btn" lay-submit="" lay-filter="demo1">立即提交</button>
            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
        </div>
    </div>
    <input type="hidden" id="msg" th:value="${message}" >
    <!--<h3 style="margin-left: 110px;color: green" id="message" th:text="${message}" ></h3>-->

</form>

<!-- /Back to Top -->
<!-- Jquery Library-->
<script th:src="@{/js/jquery-3.2.1.min.js}"></script>
<!-- Popper Library-->
<script th:src="@{/js/popper.min.js}"></script>
<!-- Bootstrap Library-->
<script th:src="@{/js/bootstrap.min.js}"></script>
<!-- Datatable  -->
<script th:src="@{/datatable/jquery.dataTables.min.js}"></script>
<script th:src="@{/datatable/dataTables.bootstrap4.min.js}"></script>
<!-- Custom Script-->
<script th:src="@{/js/custom.js}"></script>
<script th:src="@{/js/custom-datatables.js}"></script>
<script th:src="@{/js/layui.js}" charset="utf-8"></script>

<script>
    onload=function(){
        var msg =  $("#msg").val();
        if (msg){
            alert(msg);
        }

    };
    layui.use(['jquery','form'],function () {
        var form = layui.form;
        var  $ = layui.jquery;
        form.on('select(house)', function(data){
            //清空第二个下拉框
            $('#dor').empty()
            $('#dor').append("<option value=\"\" selected=\"\"></option>");
            //console.log(data.elem); //得到select原始DOM对象
            //console.log("value:"+data.value); //得到被选中的值
            var hou = data.value;
            //console.log(data.othis); //得到美化后的DOM对象
            $.ajax({
                url: '/attendance/dor',
                async: false,
                type: 'post',
                data: {hou: hou},
                success: function (data) {
                    console.log(data);
                    /*var t2 = $("#dor").empty();*/
                    for (var i = 0; i < data.length; i++) {
                        /*t2.append("<option value='" + data[i] + "'>" + data[i] + "</option>");*/
                        console.log(data[i]);
                        $('#dor').append(new Option(data[i],data[i]));
                    }

                }
            });
            form.render('select');
        });

    });
    /*layui.use('laydate', function(){
        var laydate = layui.laydate;

        //执行一个laydate实例
        laydate.render({
            elem: '#date1' //指定元素
            ,type: 'datetime'
            ,range: true
            ,format: 'yyyy-MM-dd HH:mm:ss'
            ,value: new Date()
            ,min: new Date()
            ,max: 7 //7天后
            ,trigger: 'click' //采用click弹出
            ,show: true //直接显示
            ,closeStop: '#date1'
        });
    });*/
    layui.use('laydate', function() {
        var laydate = layui.laydate;
        /*laydate.render({
            elem: '#date1'
            , type: 'month'
            , range: '~'
            , format: 'yyyy-MM'
        });*/
        laydate.render({
            elem: '#test16'
            ,min:0
            ,max:7
            ,type: 'datetime'
            ,range: '到'
            ,format: 'yyyy-MM-dd HH:mm'

        });
    });
    layui.use(['form', 'layedit', 'laydate'], function(){
        var form = layui.form
            ,layer = layui.layer
            ,layedit = layui.layedit
            ,laydate = layui.laydate;

        //日期
        laydate.render({
            elem: '#date'
        });
        laydate.render({
            elem: '#date1'
        });

        //创建一个编辑器
        var editIndex = layedit.build('LAY_demo_editor');

        //自定义验证规则
        form.verify({
            title: function(value){
                if(value.length < 1){
                    return '必填项不能为空';
                }
            }
            ,text: function(value){
                if(value.length < 1){
                    return '必填项不能为空';
                }
                if(value.length > 100){
                    return '请控制字数在100字以内';
                }
            }
            ,date: function(value){
                if(value.length < 1){
                    return '请选择请假时间';
                }
            }
            ,pass: [
                /^[0-9]{12}$/
                ,'请输入正确的学号'
            ]
            ,content: function(value){
                layedit.sync(editIndex);
            }
            ,username: function(value, item){
                if(!new RegExp("^[\u4e00-\u9fa5\]+$").test(value)){
                    return '姓名只能是中文';
                }
            }
            ,result: function (value) {
                if (value<0){
                    return '请先完成人脸信息认证';
                }
            }
        });


        //监听提交
        /*form.on('submit(demo1)', function(data){
            layer.alert(JSON.stringify(data.field), {
                title: '最终的提交信息'
            })
            return false;
        });*/


    });
    //访问用户媒体设备的兼容方法
    function getUserMedia(constraints, success, error) {
        if (navigator.mediaDevices.getUserMedia) {
            //最新的标准API
            navigator.mediaDevices.getUserMedia(constraints).then(success).catch(error);
        } else if (navigator.webkitGetUserMedia) {
            //webkit核心浏览器
            navigator.webkitGetUserMedia(constraints, success, error)
        } else if (navigator.mozGetUserMedia) {
            //firfox浏览器
            navigator.mozGetUserMedia(constraints, success, error);
        } else if (navigator.getUserMedia) {
            //旧版API
            navigator.getUserMedia(constraints, success, error);
        }
    }

    let video = document.getElementById('video');
    let canvas = document.getElementById('canvas');
    let context = canvas.getContext('2d');
    context.fillStyle="#FF0000";
    context.fillRect(0,0,150,75);

    function success(stream) {
        //兼容webkit核心浏览器
        let CompatibleURL = window.URL || window.webkitURL;
        //将视频流设置为video元素的源
        console.log(stream);

        //video.src = CompatibleURL.createObjectURL(stream);
        video.srcObject = stream;
        video.play();
    }

    function error(error) {
        console.log(`访问用户媒体设备失败${error.name}, ${error.message}`);
    }

    if (navigator.mediaDevices.getUserMedia || navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia) {
        //调用用户媒体设备, 访问摄像头
        getUserMedia({
            video: {
                width: 480,
                height: 320
            }
        }, success, error);
    } else {
        alert('不支持访问用户媒体');
    }

    document.getElementById('capture').addEventListener('click', function () {
        //context.drawImage(video, 0, 0, 480, 320);
        //let imgData = canvas.toDataURL('image/webp');
        let canvas = document.getElementById('canvas');
        canvas.width = video.videoWidth;
        canvas.height = video.videoHeight;
        canvas.getContext('2d').drawImage(video, 0, 0);
        let imgData = canvas.toDataURL('image/webp');
        document.getElementById('photo').setAttribute('src', imgData);
        let base64Data = imgData.substr(23);
        console.log("base64Data--->");
        console.log(base64Data);
        document.getElementById('base64').value = base64Data; //赋值

    });

    /* video.addEventListener('play', () => {
         console.log('play lisetner');
         canvas = faceapi.createCanvasFromMedia(video);
         document.body.append(canvas);
         faceapi.matchDimensions(canvas, displaySize);
         takePhoto();
         setInterval(takePhoto,1000);
     });
 */
    async function takePhoto(){
        if (!faceapiReady) {
            return;
        }
        let detections = await detect();
        draw(detections);
    }

    /*  async function detect() {
          // const options = new faceapi.TinyFaceDetectorOptions({ scoreThreshold: 0.2, inputSize: 608 });
          const options = new faceapi.SsdMobilenetv1Options({ minConfidence: 0.5, maxResults: 3 });
          const detections = await faceapi.detectAllFaces(video, options).withFaceLandmarks();
          return detections;
      }*/

    /*function draw(detections) {
        const resizedDetections = faceapi.resizeResults(detections, displaySize);
        canvas.getContext('2d').clearRect(0, 0, canvas.width, canvas.height);
        faceapi.draw.drawDetections(canvas, resizedDetections);
        faceapi.draw.drawFaceLandmarks(canvas, resizedDetections);
    }*/
    setInterval(faceshow,500);
    var x = 240;
    var y = 160;
    var width = 0;
    var high = 0;
    var endx = 0;
    var endy = 0;
    var endw = 0;
    var endh = 0;
    var mycanvas = document.getElementById('myCanvas').getContext('2d');
    function lerp(min, max, fraction) {
        return (max - min) * fraction + min;
    }
    function faceshow() {

        let canvas = document.getElementById('canvas');
        canvas.width = video.videoWidth;
        canvas.height = video.videoHeight;
        canvas.getContext('2d').drawImage(video, 0, 0);
        let imgData = canvas.toDataURL('image/webp');
        document.getElementById('photo').setAttribute('src', imgData);
        let base64Data = imgData.substr(23);
        /*console.log("base64Data--->");
        console.log(base64Data);*/
        /* document.getElementById('base64').value = base64Data; //赋值*/
        $.ajax({
            url: "/attendance/facedelete",
            type: "POST",
            async: false,
            dataType: "json",
            data: {"base64Data": base64Data},
            success: function (data) {
                console.log("data"+data);
                if (null != data.message){
                    alert(data.message);
                }
                /*mycanvas.clearRect(0, 0, canvas.width, canvas.height);

                /!*mycanvas.fillStyle="#FF0000";*!/
                mycanvas.strokeStyle="#FF0000"
                /!*mycanvas.strokeRect(data.dd[0],data.dd[1],data.dd[2],data.dd[3]);*!/
                mycanvas.strokeRect(data.dd[0],data.dd[1],data.dd[2],data.dd[3]);
                /!*mycanvas.clearRect(10,10,150,75);*!/
                /!*alert(data.message);*!/*/

                endx = data.dd[0];
                endy = data.dd[1];
                endw = data.dd[2];
                endh = data.dd[3];
                /* console.log("endx:"+endx);
                 console.log("endy"+endy);
                 console.log("endw"+endw);
                 console.log("endh"+endh);*/
                update();
            },
            error: function () {
                /*window.location.href = "../yang/;*/
            },
        });

        /*mycanvas.clearRect(0, 0, canvas.width, canvas.height);

        /!*mycanvas.fillStyle="#FF0000";*!/
        mycanvas.strokeStyle="#FF0000"
        mycanvas.strokeRect(10,10,150,75);
        /!*mycanvas.clearRect(10,10,150,75);*!/*/
    }
    function update() {
        /*console.log("x:"+x);
        console.log("y:"+y);
        console.log("width:"+width);
        console.log("high:"+high);*/

        if (endx==endy&&width==high&&endx==width&&endx==0){
            mycanvas.clearRect(0, 0, canvas.width, canvas.height);
        }else {
            /*var mycanvas = document.getElementById('myCanvas').getContext('2d');*/
            mycanvas.clearRect(0, 0, canvas.width, canvas.height);
            /*mycanvas.fillStyle="#FF0000";*/
            mycanvas.strokeStyle="#FF0000";
            /*mycanvas.strokeRect(data.dd[0],data.dd[1],data.dd[2],data.dd[3]);*/
            mycanvas.strokeRect(x,y,width,high);
            x = lerp(x,endx,0.1);
            y = lerp(y,endy,0.1);
            width = lerp(width,endw,0.1);
            high = lerp(high,endh,0.1);
            requestAnimationFrame(update);
        }
    }
    /*打开增加模态框*/
    function openAddModal() {
        $("#addModal").modal('show');
        //默认选择第一个下拉框
        document.getElementById("select1").selected = 'selected';
    }
    function auth() {
        var canvas = document.getElementById('canvas');
        canvas.width = video.videoWidth;
        canvas.height = video.videoHeight;
        canvas.getContext('2d').drawImage(video, 0, 0);
        var imgData = canvas.toDataURL('image/webp');
        document.getElementById('photo').setAttribute('src', imgData);
        var base64Data = imgData.substr(23);
        $.ajax({
            url: "/leave/auth",
            type: "POST",
            async: false,
            dataType: "json",
            data: {"base64Data": base64Data},
            success: function (data) {
                console.log("data"+data);
                alert(data.message);
                if ("认证成功!" == data.message){
                    $("#addModal").modal('hide');
                    var res = document.getElementById("result");
                    res.value = "认证成功";
                }
            },
            error: function () {
                alert("认证失败，请重试!");
            },
        });
    }


</script>



</body>
</html>